<template>
<div class="news">
  <img src="./../assets/product/pCarousel.png" alt="pCarousel" class="pCarousel">
  <h3 class="title">NEWS</h3>
  <p class="brif">易水新闻</p>
  <div class="content">
    <div class="left">
      <ul>
        <li>新闻中心</li>
        <li class="n pitch" @click="childCheck($event)"><router-link to="/news/comNews">企业新闻</router-link></li>
        <li class="n" @click="childCheck($event)"><router-link to="/news/realNews">实时政策</router-link></li>
        <li class="n" @click="childCheck($event)"><router-link to="/news/mediaNews">媒体报道</router-link></li>
      </ul>
    </div>
    <div class="right">
      <router-view v-show="!isShow"></router-view>
      <div class="newsLists clearfix" v-show="isShow">
        <ul v-for="item of com">
          <li>{{item.title}}</li>
          <span>{{item.time}}</span>
        </ul>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import jQuery from 'jquery'
export default {
  data () {
    return {
      real: [],
      com: 0,
      isShow: true
    }
  },
  methods : {
    scrollMethod () {
      const sumH = document.body.scrollHeight
      const viewH = document.documentElement.clientHeight
      const scrollH = document.body.scrollTop
      if (viewH + scrollH >= (sumH - 100)) {
        this.getData()
      }
    },
    getData () {
      this.limit += 10,
      this.$http({
        url: 'http://localhost:2000/getjson/comNews',
        method: 'get',
        params: {
          page: 1,
          limit: this.limit,
          mdrender: 'false'
        }
      }).then((res) => {
        this.com = res.data.lists
      }).catch((res) => {
        console.log('error:',res)
      })
    },
    childCheck(e) {
      this.isShow = false;
      let ls = jQuery('.n');
      ls.removeClass('pitch')
      e.stopPropagation();
      jQuery('.n>a').css('color','#000000');
      jQuery(e.target.parentElement).addClass('pitch');
    }
  },
  mounted() {
    this.getData();
    window.addEventListener('scroll', this.scrollMethod);
  },
  beforeUpdate() {
       if(this.$route.path == '/news'){
          this.isShow = true;
          let ls = jQuery('.n');
          ls.removeClass('pitch')
          jQuery('.left>ul>li:eq(1)').addClass('pitch');
        }else {
          this.isShow = false;
        }
    }
}
</script>

<style scoped>
.pCarousel {
  width: 100%;
}
.left li {
  width: 6rem;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
  margin-bottom: 1rem;
  font-weight: 800;
  border-bottom: 1px dotted black;
}
.left ul {
  background-color: #ffffff !important;
}
.left li:nth-child(1) {
  background: -webkit-linear-gradient(top, #ffffff , #1bcae0);
  background: -o-linear-gradient(bottom, #ffffff, #1bcae0);
  background: -moz-linear-gradient(bottom, #ffffff, #1bcae0);
  background: linear-gradient(to bottom, #ffffff , #1bcae0);
  border-bottom: 0;
}
.left li:nth-last-child(1){
  border-bottom: 0;
}
.content {
  display: flex;
  justify-content: space-around;
}
.right {
  width: 40rem;
}
.pitch a{
  color: #ffffff !important;
}
.left li a {
  display: block;
}
.left li a:hover {
  background-color:  #11a2d0;
  color: #ffffff !important;
}
</style>
